<!--
 * @Description: 数泽MES
 * @Author: 数泽
 * @Date: 2023-10-27 16:08:02
-->
<template>
  <flexbox class="xr-detail-header">
    <div v-if="iconClass" :style="{ backgroundColor: iconBgColor }" class="xr-detail-header__icon">
      <i :class="iconClass" :style="{ color: iconColor }"/>
    </div>
    <div class="xr-detail-header__body">
      <slot name="body"/>
      <template v-if="defaultBodyShow">
        <div class="detail-name">{{ detailName }}</div>
        <div class="detail-value">{{ detailValue }}</div>
      </template>
    </div>
    <div class="xr-detail-header__ft">
      <slot name="ft"/>
      <el-button v-if="showEdit"
                 :class="editButtonClass"
                 style="margin-right: 10px;"
                 class="xr-detail-header--button"
                 icon="wk wk-circle-edit"
                 type="primary"
                 @click="editClick">
        编辑
      </el-button>
      <el-dropdown v-if="dropdownItems && dropdownItems.length > 0" trigger="click"
                   @command="handleTypeClick">
        <el-button icon="el-icon-more" class="xr-detail-header--more"/>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in dropdownItems" :key="index"
                              :icon="item.icon"
                              :command="item.command">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </flexbox>
</template>


<script setup>
// 详情头部
defineOptions({
  name: 'WkDetailHeader',

})

const props = defineProps({
  iconClass: [String, Array],
  iconBgColor: {
    type: String,
    default: '#ECEEF2'
  },
  iconColor: {
    type: String,
    default: '#42526E'
  },
  detailName: String,
  detailValue: String,
  defaultBodyShow: {
    type: Boolean,
    default: true
  },
  dropdownItems: Array,
  showEdit: {
    type: Boolean,
    default: false
  },
  editButtonClass: {
    type: String,
    default: 'xr-btn--primary'
  }
})

const emits = defineEmits(['command-select', 'edit'])

function handleTypeClick(type) {
  emits('command-select', type)
}

function editClick() {
  emits('edit')
}

</script>

<style lang="scss" scoped>
.xr-detail-header {
  position: relative;
  padding: 20px;
  min-height: 60px;

  &__icon {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: $xr-border-radius-base;
    margin-right: 10px;

    .wk {
      font-size: 18px;
    }
  }

  &__body {
    flex: 1;

    .detail-name {
      color: #999;
      font-size: 12px;
      margin-bottom: 5px;
    }

    .detail-value {
      color: #333;
      font-size: 16px;
      font-weight: 600;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  &--more {
    margin-left: 15px;;
  }

  &--more:hover {
    color: $xr-color-primary;
  }

  &--button {
    :deep(i) {
      font-size: 13px;
      margin-right: 5px;
    }
  }
}
</style>
